<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实验室标签</title>
    <style>
      @media print {
        body,
        html {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          font-size:8px;
          font-weight: normal;
        }
        @page {
          size: 40mm 30mm;
          margin: 0;
        }
        * {
          box-sizing: border-box;
        }
        #app {
          width: 100%;
          height: 100%;
        }
        .list-item {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .txcode {
          display: block;
          width: 30mm;
          margin-left: 5%;
          height: 6mm;
          margin: 0 auto;
        }
        .footer {
          page-break-after: always;
          text-align: center;
        }
        .str-item {
          margin:0 0.5mm 0 2.5mm;
          font-size: 0.1mm;
          /* width: 100%; */
          /* overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center; */
        }
      }
      .canvas {
        position: fixed;
        visibility: hidden;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <section id="app">
      <div v-for="(item,index) in list" :key="index" class="list-item">
        <div><img class="txcode" :src="item.codeUrl" /></div>
        <div>{{item.code}}</div>
        <div>
          <span>{{ user.patientName }}</span>
        </div>
        <div>
          <span>{{ user.sexDesc }}，</span>
          <span v-if="user.age>17">{{ user.age }}岁</span>
          <span v-else>{{user.birthday|toAge}}</span>
        </div>
        <div class="str-item">
          {{item.sampleStr}}
          {{item.sampleCapacity}}
          {{item.sampleUnitStr}}
          {{item.containerNameStr}}
          {{item.containerColorStr}}
          {{item.name}} 
        </div>
      </div>
    </section>
    <canvas class="canvas" id="canvas"></canvas>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          user: null,
          list: [],
          canvas: null,
          sampleEnum:[],
          //报告单位
          reportUnitEnum:[],
          //单位
          unitEnum:[],
          //实验室容器
          vesselEnum:[],
          //试管颜色
          vesselColorEnum:[]
        },
        mounted() {
          var th = this;
          th.canvas = document.getElementById("canvas");
          window.addEventListener("message", function(e) {
            var json = e.data;
            this.sampleEnum=json.sampleEnum;
            this.reportUnitEnum=json.reportUnitEnum;
            this.unitEnum=json.unitsEnum;
            this.vesselEnum=json.vesselEnum;
            this.vesselColorEnum=json.vesselColorEnum;
            var arr = [];
            th.user = json.user;
            for (var index = 0; index < json.list.length; index++) {
              var element = json.list[index];
              var j = {
                  code: element.code,
                  name: element.checkupName,
                };
                var objs={
                  sampleCapacity:element.sampleCapacity,
                  sampleStr:json.sampleEnum[element.sample],
                  containerNameStr:json.vesselEnum[element.containerName],
                  containerColorStr:json.vesselColorEnum[element.containerColor] ,
                  sampleUnitStr:json.unitsEnum[element.sampleUnit]
                }
                th.initCode(j);
                arr.push({...j,...objs});
            }
            th.list = arr;
            // th.list=json;
            th.$nextTick(function() {
              th.isLoadImg();
            });
          });
        },
        methods: {
          isLoadImg() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          },
          initCode(obj) {
            var th = this;
            JsBarcode("#canvas", obj.code, {
              width: 1,
              height: 30,
              margin: 0,
              displayValue: false // 是否在条形码上下方显示文字
            });
            obj.codeUrl = th.canvas.toDataURL("image/jpeg");
          }
        },
        filters: {
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (
                mouth == 1 ||
                mouth == 3 ||
                mouth == 5 ||
                mouth == 7 ||
                mouth == 8 ||
                mouth == 10 ||
                mouth == 12
              ) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
            // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
            // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

            return dateStr;
          },
        }
      });
    </script>
  </body>
</html>
